import { memo, ReactElement } from "react";
import styles from "./index.module.scss";

import type { FC } from "react";

import Link from "next/link";
export interface IProps {
  children?: ReactElement;
  linkList?: any[];
  q?: string;
}

const BreadCrumb: FC<IProps> = memo(function (props) {
  const { children, linkList = [], q = "" } = props;

  return (
    <div className={styles.container}>
      {linkList.map((item, index) => {
        if (index === 0) {
          return (
            <Link href={item.path} key={item.name}>
              <span className={styles["first-item"]}>{item.name}</span>
            </Link>
          );
        } else if (index === linkList.length - 1) {
          return (
            <>
              <span className={styles["separator"]}></span>
              <span className={styles["last-item"]}>{item.name}</span>
            </>
          );
        } else {
          return (
            <>
              <span className={styles["separator"]}></span>
              <Link href={item.path}>
                <span className={styles["last-item"]}>{item.name}</span>
              </Link>
            </>
          );
        }
      })}
    </div>
  );
});

export default BreadCrumb;
BreadCrumb.displayName = "BreadCrumb";
